<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Subway China | 赛百味中国</title>
		<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
		<script src="../js/swiper.js"></script>
		<script src="../js/jquery-2.2.3.min.js"></script>
		<script src="../js/ch.js"></script>
		<script src="../js/chPic.js"></script>
		<script src="../js/en.js"></script>
		<script src="../js/enPic.js"></script>
		<style type="text/css">
			.swiper-container {
				width: 606px;
				height: 360px;
				color: white;
				position: absolute;
				z-index: 1000;
				top: 0px;
				left: 0px;
			}
			
			* {
				padding: 0;
				margin: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			header {
				width: 910px;
				margin: 0 auto;
				position: relative;
			}
			
			#shenti {
				position: relative;
				margin: 0 auto;
				width: 910px;
				top: 100px;
			}
			
			#foot {
				position: relative;
				margin: 0 auto;
				width: 910px;
				top: 225px;
				text-align: center;
			}
			
			#footLast {
				position: relative;
				margin: 0 auto;
				width: 910px;
				top: 255px;
				text-align: center;
				font-size: 12px;
			}
			
			#headerOne {
				z-index: 1000;
				position: absolute;
				right: 0;
			}
			
			#theText {
				position: absolute;
				left: -500px;
			}
			
			#navUl li {
				float: left;
				list-style: none;
				width: 145px;
				text-align: center;
				border-left: 0.5px solid darkgreen;
			}
			
			.navLi a {
				text-decoration: none;
				color: white;
			}
			
			nav {
				position: relative;
			}
			
			#beijng {
				position: absolute;
				top: 1px;
				left: 180px;
			}
			
			#logo {
				width: 180px;
				height: 100px;
				display: inline-block;
				background: url(../img/首页_files/logo.jpg);
				position: absolute;
			}
			
			#navUl {
				position: absolute;
				left: 180px;
				top: 40px;
			}
			
			#theSpan {
				color: white;
				width: 146px;
				position: absolute;
				display: inline-block;
				background: rgb(32, 134, 43);
				height: 35px;
				border-radius: 0 10px 10px 0;
				top: -6px;
				right: 0;
				line-height: 35px;
			}
			
			#findLi a {
				text-decoration: none;
				color: yellow;
			}
			
			#navUlTwo {
				list-style: none;
				position: absolute;
				top: 69px;
				left: 326px;
				z-index: 9999999;
				width: 200px;
				font-size: 12px;
				background: #0ca251;
				text-shadow: 1px 1px 1px #000;
				border: 1px solid #d3d3d3;
				border-top: 3px solid #349a48;
				font-family: Arial Black, 'Microsoft YaHei', Gadget, sans-serif;
				display: none;
			}
			
			#navUlTwo a {
				text-decoration: none;
				color: white;
			}
			
			#navUlTwo li {
				width: 190px;
				text-align: left;
				padding-left: 10px;
				line-height: 36px;
				border-top: 1px solid #36a662;
				border-bottom: 1px solid #0b914a;
			}
			
			.navLi a:hover {
				color: yellow;
			}
			
			#findLi a:hover {
				color: white;
			}
			
			#partTwo {
				width: 290px;
				height: 355px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
				top: 0px;
				left: 310px;
			}
			
			#partThree {
				width: 606px;
				height: 360px;
				position: absolute;
				right: 0;
				z-index: 100;
			}
			
			#partThree1 {
				width: 290px;
				height: 360px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 100;
			}
			
			#partFour {
				width: 606px;
				height: 360px;
				position: absolute;
				right: 0;
				z-index: 100;
			}
			
			#partFour1 {
				width: 290px;
				height: 360px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 100;
			}
			
			#partFive {
				width: 606px;
				height: 360px;
				position: absolute;
				right: 0;
				z-index: 100;
			}
			
			#partFive1 {
				width: 290px;
				height: 360px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 100;
			}
			
			.imgTwo {
				position: absolute;
				top: -156px;
			}
			
			.imgThree {
				position: absolute;
				left: -290px;
				top: 40px;
			}
			
			.imgFour {
				position: absolute;
				left: -290px;
				top: 116px;
			}
			
			#footOne {
				width: 606px;
				height: 95px;
				position: absolute;
				top: 380px;
				left: 0px;
			}
			
			#footOne a {
				display: inline-block;
				width: 195px;
				height: 95px;
				margin-right: 3px;
			}
			
			#footTwo {
				width: 290px;
				height: 95px;
				position: absolute;
				top: 380px;
				right: 0;
			}
			
			#footTwo a {
				display: inline-block;
				width: 135px;
				height: 95px;
				margin-right: 5px;
			}
			
			#weixinImg {
				position: absolute;
				top: -240px;
				right: 20px;
				z-index: 1010;
				display: none;
			}
			
			#theLastFoot a {
				font-size: 13px;
			}
			
			.imgOne {
				opacity: 0;
			}
			
			#subwayLink {
				text-decoration: none;
			}
			
			#subwayLink span {
				color: #060;
				font-size: 13px;
				font-weight: bold;
				margin-left: 10px;
				font-family: "Trebuchet MS", 'Microsoft YaHei';
			}
		</style>
	</head>

	<body>
		<header id="">
			<div id="headerOne">
				<span id="theText">
				
			</span>
				<select onchange="sel(this)" id="mySel">
					<option></option>
					<option></option>
					<option></option>
				</select>
				<span></span>
				<a id="subwayLink" href="http://www.subway.com/nogeo"><span></span></a>
			</div>
			<nav>
				<a id="logo" class="logo" href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/1.html"></a>
				<img id="beijng" src="" />
				<ul id="navUl">
					<li class="navLi">
						<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/6.html"><span></span></a>
					</li>
					<li id="listFood" class="navLi">
						<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/3.html"><span></span></a>
					</li>
					<li class="navLi">
						<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/4.html"><span></span></a>
					</li>
					<li class="navLi">
						<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/5.html"><span></span></a>
					</li>
					<li id="findLi">
						<span id="theSpan">
							<a href="###"><span></span></a>
						</span>
					</li>
				</ul>
			</nav>
			<ul id="navUlTwo">
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
				<li>
					<a href="###"><span></span></a>
				</li>
			</ul>
		</header>
		<div id="shenti">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<img class="swiper-slide" src="" />
					<img class="swiper-slide" src="" />
				</div>
				<div class="swiper-button-prev swiper-button-white"></div>
				<div class="swiper-button-next swiper-button-white"></div>
			</div>
			<div id="partTwo">
				<div id="partThree">
					<div id="partThree1">
						<img class="imgOne" src="" />
						<img class="imgTwo" src="" />
						<img class="imgThree" src="" />
						<img class="imgFour" src="" />
					</div>
				</div>
				<div id="partFour">
					<div id="partFour1">
						<img class="imgOne" src="" />
						<img class="imgTwo" src="" />
						<img class="imgThree" src="" />
						<img class="imgFour" src="" />
					</div>
				</div>
				<div id="partFive">
					<div id="partFive1">
						<img style="opacity: 1;" class="imgOne" src="" />
						<img class="imgTwo" src="" />
						<img class="imgThree" src="" />
						<img class="imgFour" src="" />
					</div>
				</div>
			</div>
			<div id="footOne">
				<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/2.html"><img src="" /></a>
				<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/3.html"><img src="" /></a>
				<a href="http://192.168.0.114:8020/saibaiwei/%E9%A1%B9%E7%9B%AE/src/6.html"><img src="" /></a>
			</div>
			<div id="footTwo">
				<a href="###"><img src="" /></a>
				<a id="weixinHover" href="###"><img src="" /></a>
				<img id="weixinImg" src="" />
			</div>
		</div>
		<div id="foot">
			<div id="theLastFoot">
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				<br />
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
				|
				<a href="###"> <span></span></a>
			</div>
		</div>
		<div id="footLast">
			<p>SUBWAY® is a Registered Trademark of Subway IP Inc.
				<br /> ®2016 Subway IP Inc.
			</p>
		</div>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				loop: true,
				autoplay: 5000,
				autoplayDisableOnInteraction: false,
				prevButton: '.swiper-button-prev',
				nextButton: '.swiper-button-next',
			})
			var weixinHover = document.getElementById("weixinHover");
			var weixinImg = document.getElementById("weixinImg");
			weixinHover.onmouseover = function() {
				weixinImg.style.display = "block";
			}
			weixinHover.onmouseout = function() {
				weixinImg.style.display = "none";
			}
			var listFood = document.getElementById("listFood");
			var navUlTwo = document.getElementById("navUlTwo");
			var navUlTwoLi = document.querySelectorAll("#navUlTwo>li");
			var navUlTwoA = document.querySelectorAll("#navUlTwo>li>a");
			for(var i = 0; i < navUlTwoLi.length; i++) {
				navUlTwoLi[i].onmouseover = function() {
					this.children[0].style.color = "yellow";
				}
				navUlTwoLi[i].onmouseout = function() {
					this.children[0].style.color = "white";
				}
			}

			listFood.onmouseover = function() {
				navUlTwo.style.display = "block";
			}
			navUlTwo.onmouseleave = function() {
				navUlTwo.style.display = "none";
			}

			var num = 2;
			setInterval(function() {

				$(".imgOne").eq(num).css("opacity", 1);
				$(".imgTwo").eq(num).animate({
					top: 0
				}, 500, function() {
					$(".imgThree").eq(num).animate({
						left: 0
					}, 500, function() {
						$(".imgFour").eq(num).animate({
							left: 0
						}, 500, function() {
							$(".imgThree").eq(num).animate({
								left: 290
							}, 500, function() {
								$(".imgFour").eq(num).animate({
									left: 290
								}, 500, function() {
									$(".imgTwo").eq(num).animate({
										top: -156
									}, 500, function() {
										$(".imgOne").eq(num).animate({
											opacity: 0
										});
										$(".imgFour").eq(num).css("left", -290)
										$(".imgThree").eq(num).css("left", -290)
										num--
									})
								})
							})
						})
					})
				})
				if(num == -1) {
					num = 2;
				}
			}, 5000)

			var allSpanArr = document.querySelectorAll("span");
			var mySelArr = document.querySelectorAll("#mySel>option");
			var allImgArr = document.querySelectorAll("img");
			console.log(allImgArr)
			setThing(zhObj);
			setThingLu(zhObjLu);

			function sel(ev) {
				if(ev.value == "Chinese") {
					setThing(zhObj);
					setThingLu(zhObjLu);
				}
				if(ev.value == "英文") {
					setThing(enObj);
					setThingLu(enObjLu);
				}
			}

			function setThing(obj) {
				var navArr = obj.nav;
				for(var i = 0; i < allSpanArr.length; i++) {

					allSpanArr[i].innerHTML = navArr[i];
				}
				var selArr = obj.selInfo;
				for(var i = 0; i < mySelArr.length; i++) {
					mySelArr[i].value = selArr[i];
					mySelArr[i].innerHTML = selArr[i];

				}
			}

			function setThingLu(obj) {
				var navArr = obj.navPic;
				for(var i = 0; i < allImgArr.length; i++) {

					allImgArr[i].src = navArr[i];
				}
			}
		</script>
	</body>

</html>